<template>
  <div style="widht: 100%;">
    <div style="width:100%;height:30px;margin-top:15px;">
      <a-row type="flex" justify="space-between">
      <a-col>
        <a-icon type="check-circle" theme="filled" style="color: #1890ff; margin: 0 5px" />
        <span style="font-size: 16px; font-weight: bold; color: #333333">{{title}}: </span>
        <a-radio-group v-model="form.opinion"  :disabled="!editable">
          <a-radio :value="d.code" v-for="(d,index) in dicts.opinionDict" :key="'opinoin_'+index">{{ d.name }}</a-radio>
        </a-radio-group>
        <span v-if="auditor!=null && auditor.length>0">&nbsp;&nbsp;&nbsp;&nbsp;审核人：{{auditor}}</span>
      </a-col>
      <a-col v-if="form.opinion==1 && editable">
        <a-button @click="doSave()" style="margin-left: 8px" size="small">保存</a-button>
        <a-button @click="doAdd()" style="margin-left: 8px" size="small">添加</a-button>
        <a-button @click="doDel()" style="margin-left: 8px; color: red" size="small">删除</a-button>
      </a-col>
    </a-row>
    </div>
    <div style="width:100%;">
      <a-table v-if="form.opinion==1" :rowKey="rowKey" :columns="columns" :data-source="form.list" 
      :pagination="false" 
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      bordered>
      <template slot="targetType" slot-scope="text, record">
        <select :disabled="!editable" style="width: 100%;height:30px;border-radius:2px;border-color:#d9d9d9" v-model="record.targetType">
          <option  :key="target.id" :value="target.id" v-for="target in listTargets">{{target.type}}</option>
        </select>
      </template>
      <template slot="targetDescript" slot-scope="text, record">
        <a-textarea
          v-model="record.targetDescript"
          placeholder="请填写指标说明"
          :auto-size="{ minRows: 1, maxRows: 20 }"
          :maxLength="500"
          v-if="editable"
        />
        <span v-else>{{record.targetDescript}}</span>
      </template>
      <template slot="problemDescript" slot-scope="text, record">
        <a-textarea
          v-model="record.problemDescript"
          placeholder="问题描述"
          :auto-size="{ minRows: 1, maxRows: 20 }"
          :maxLength="500"
          v-if="editable"
        />
        <span v-else>{{record.problemDescript}}</span>
      </template>
      <template slot="remark" slot-scope="text, record">
        <a-textarea
          v-model="record.remark"
          placeholder="备注说明"
          :auto-size="{ minRows: 1, maxRows: 20 }"
          :maxLength="500"
          v-if="editable"
        />
        <span v-else>{{record.remark}}</span>
      </template>

    </a-table>
    </div>
  </div>
</template>

<script>
import { strNotNull } from '@/utils/common.js'
import { filterObj, formatDate } from '@/utils/util'
import { getAction, postAction, downFile } from '@/api/manage'
import ExcelPaste from '@/components/excelPaste/ExcelPaste'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import Vue from 'vue'
export default {
  components: { ExcelPaste },
  name: 'ProjectCompleteAcceptOpinion',
  props: {
    opinionType: {
      type: Number,
      required: true
    },
    applyId: {
      type: Number,
      required: true
    },
    projectBuildId: {
      type: String,
      required: true
    },
    editable: {
      type: Boolean,
      required: false,
      default: false,
    },
    auditor: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      rowKey: 'id',
      selectedRowKeys: [],
      selectedRows: [],
      listTargets: [],
      form:{
        applyId:this.applyId,
        opinionType:this.opinionType,
        opinion:2,
        list:[]
      },
      title:'',
      dicts: {
        opinionDict: [
          { code: 2, name: '全部合格' },
          { code: 1, name: '存在不合格项' }
        ],
        opinionTitleDict: [
          { code: 1, name: '使用部门意见' },
          { code: 2, name: '维护部门意见' },
          { code: 3, name: '设备安全意见' },
          { code: 4, name: '工艺技术意见' }
        ]
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          width: '5%',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '指标类型',
          dataIndex: 'targetType',
          width: '15%',
          scopedSlots: { customRender: 'targetType' }
        },
        {
          title: '指标说明',
          dataIndex: 'targetDescript',
          width: '29%',
          scopedSlots: { customRender: 'targetDescript' },
        },
        {
          title: '问题描述',
          dataIndex: 'problemDescript',
          width: '29%',
          scopedSlots: { customRender: 'problemDescript' },
        },
        {
          title: '备注说明',
          dataIndex: 'remark',
          width: '15%',
          scopedSlots: { customRender: 'remark' },
        },
        {
          title: '登记人',
          dataIndex: 'createrId',
          width: '7%',
        }
      ],
      urls: {
        listTargets: '/projectCompleteAcceptTarget/listByProjectBuildId',
        listOpinions: '/projectCompleteAccept/listOpinions',
        save: '/projectCompleteAccept/saveOpinions',
      },
      maxId: 0,
    }
  },
  watch: {},
  mounted() {
    if(this.opinionType!=1){
      this.dicts.opinionDict.push({ code: 0, name: '不涉及' })
    }
    this.title=this.dicts.opinionTitleDict.filter(item=>item.code==this.opinionType)[0].name;
    this.initListTargets()
  },
  methods: {
    doAdd(){
      var currUser = Vue.ls.get(USER_INFO).username
      var id = new Date().getTime()
      this.form.list.push({
        id:id,
        targetType: null,
        targetDescript: '',
        problemDescript: '',
        remark: '',
        createrId: currUser
      })
    },
    doDel(){
      if (this.selectedRowKeys.length < 1) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      this.selectedRowKeys.forEach((id) => {
        var index = this.form.list.findIndex((item) => {
          return item.id == id
        })
        if (index >= 0) {
          this.form.list.splice(index, 1)
          }
      })
      this.selectedRowKeys=[];
      this.selectedRows=[];
    },
    doSave() {
      var form=JSON.parse(JSON.stringify(this.form))
      var list=[];
      for(var i=0;i<form.list.length;i++){
        var item=form.list[i]
        if(!item.targetType){
          this.$message.warning('【'+this.title+'】第【'+(i+1)+'】行，请选择指标类型')
          return;
        }
        item.id=null
        list.push(item)
      }
      form.list=list
      postAction(this.urls.save, form)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          } else {
            this.$message.warning('保存数据出错:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('保存数据异常:' + res.message)
        })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    initListTargets(){
      getAction(this.urls.listTargets, { projectBuildId: this.projectBuildId }).then((res) => {
        if (res.code == 200) {
          this.listTargets = res.result
          this.initOpinionList()
        } else {
          this.$message.warning('加载数据失败:' + res.message)
        }
      })
    },
    initOpinionList(){
      if(!this.form.applyId){
        return
      }
      getAction(this.urls.listOpinions, { applyId: this.form.applyId,opinionType: this.form.opinionType }).then((res) => {
        if (res.code == 200) {
          this.form.opinion = res.result.opinion
          this.form.list = res.result.list
        } else {
          this.$message.warning('加载数据失败:' + res.message)
        }
      })
    }
  },
}
</script>

</script>
<style scoped>
/deep/ .ant-table .ant-table-tbody .ant-table-row td {
  padding: 2px 2px !important;
}
.editable-row-operations a {
  margin-right: 8px;
}
.info-title {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.info-title > img {
  margin-right: 5px;
}
.info-title > span {
  font-size: 16px;
  font-weight: 900;
  color: black;
}
</style>
